<template>
    <div class="shopcart">
      <div class="content"  @click="toggleList">
        <div class="left" :class="{'light':totalcount>0}">
          <div class="icon-wrap">
            <div class="icon">
              <i class="fa fa-shopping-cart"></i>
            </div>
            <span class="num" v-show="totalcount">{{totalcount}}</span>
          </div>
          <div class="price">￥{{totalPrice}}</div>
          <div class="desc">另需配送费￥{{deliveryPrice}}元</div>
        </div>
        <div v-if="totalPrice>=minPrice" class="right go" @click.stop="go">去结算</div>
        <div v-else-if="totalcount>0&&minPrice>totalPrice" class="right">还差￥{{minPrice-totalPrice}}元</div>
        <div v-else class="right">￥{{minPrice}}起送</div>
      </div>
      <transition name="slide">
        <div class="shopcart-list" v-show="listShow">
          <div class="list-header">
            <h1 class="title">购物车</h1>
            <span class="empty" @click.stop="empty">清空</span>
          </div>
          <div class="food-list" ref="foodList">
            <ul>
              <li class="food" v-for="food in selectfood">
                <span class="name">{{food.name}}</span>
                <div class="right">
                  <span class="price">￥{{food.price*food.count}}</span>
                  <div class="btn-wrap">
                    <btn :food="food" @drop="drop"></btn>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </transition>
      <transition name ="fade">
        <div class="list-bg" v-show="listShow" @click="zhedie=true"></div>
      </transition>
    </div>
</template>

<script type="text/ecmascript-6">
  import Scroll from 'better-scroll'
  import btn from "components/btn/btn"
  export default {
    created(){
    },
    mounted(){
    },
    props:{
      selectfood:{
        type:Array,
        default:function(){
          return []
        }
      },
      deliveryPrice:{
        type:Number,
        default:0
      },
      minPrice:{
        type:Number,
        default:0
      }
    },
    data () {
      return {
        zhedie:true,
        scroll:null
      }
    },
    methods:{
      go(){
        window.alert(`共需支付${this.totalPrice}元`)
      },
      empty(){
        this.selectfood.map(v=>{
          v.count=0;
        })
      },
      drop(dom){
        this.$emit("drop",dom);
      },
      toggleList(){
        if(!this.totalcount)return;
        this.zhedie=!this.zhedie;
      }
    },
    computed:{
      totalcount(){
        if(this.selectfood.length==0)return 0;
        let res = 0;
        this.selectfood.map(v=>{
          res+=v.count;
        });
        return res
      },
      totalPrice(){
        if(this.selectfood.length==0)return 0;
        let res = 0;
        this.selectfood.map(v=>{
          res+=v.price*v.count;
        });
        return res
      },
      listShow(){
        if(!this.totalcount){
          this.zhedie=true
          return false
        }
        if(!this.zhedie){
          this.$nextTick(()=>{
            if(!this.scroll){
              this.scroll = new Scroll(this.$refs.foodList,{
                click:true
              });
            }else{
              this.scroll.refresh();
            }
          })

        }

        return !this.zhedie;
      }
    },
    watch:{

    },
    components:{
      btn
    }
  }
</script>

<style lang="stylus" rel="stylesheet/styleus">
  @import "./../../common/stylus/mixin.styl";
.shopcart
  position fixed
  height 48px
  width 100%
  bottom 0
  z-index 50
  .list-bg
    position fixed
    top 0
    left 0
    width 100%
    height 100%
    background rgba(7,17,27,.6)
    opacity 1
    z-index -2
    backdrop-filter blur(10px)
    transition opacity .5s
    &.fade-enter,&.fade-leave-to
      opacity 0
  .content
    height 48px
    width 100%
    background #141d27
    display flex
    .left
      flex 1
      font-size 0
      &.light
        .icon-wrap
          .icon
            color: #fff
            background-color rgba(0,160,220,1);
      &.light
        .price
          color: #fff
      .icon-wrap
        margin 0 12px
        padding 6px
        position relative
        top -10px
        border-radius 50%
        width 56px
        height 56px
        background #141d27
        box-sizing border-box
        display inline-block
        .icon
          display inline-block
          width 100%
          height 100%
          text-align center
          font-size 24px
          background #2B343C
          color: #80858A
          border-radius 50%
          line-height 44px
        .num
          display inline-block
          position absolute
          right 0
          top 0
          height 16px
          width 24px
          border-radius 16px
          background-color rgba(240,20,20,1)
          box-shadow 0 4px 8px 0 rgba(0,0,0,.4)
          line-height 16px
          color: #ffffff
          font-size 9px
          font-weight 700
          text-align center
      .price
        display inline-block
        color rgba(255,255,255,.4)
        line-height 48px
        padding-right 12px
        font-size: 16px
        vertical-align top
        position: relative
        &:after
          content ""
          position: absolute
          right:0
          width 1px
          height 24px
          top 0
          bottom 0
          margin auto 0
          background rgba(255,255,255,.1)
      .desc
        vertical-align top
        display inline-block
        box-sizing border-box
        padding 0 12px
        font-size 12px
        line-height 48px
        color: rgba(255,255,255,.4)
    .right
      flex 0 0 105px
      width 105px
      line-height 48px
      color: #919396
      background #2B333B
      font-size 12px
      text-align center
      font-weight 700
      &.go
        background #028A3E
        color #fff
  .shopcart-list
    position absolute
    top 0
    left 0
    width 100%
    z-index -1
    transition all .5s ease-in-out
    transform translate3d(0,-100%,0)
    &.slide-enter,&.slide-leave-to
      transform translate3d(0,0,0)
    .list-header
      height 40px
      line-height 40px
      box-sizing border-box
      background: #f3f5f7
      border-bottom 1px solid rgba(7,17,27,.1)
      padding 0 18px
      .title
        display inline-block
        font-size 14px
        font-weight 200
        float left
      .empty
        font-size 12px
        color rgb(0,160,220)
        float right
    .food-list
      background #fff
      padding 0 18px
      width:100%
      max-height 217px
      box-sizing border-box
      overflow hidden
      .food
        line-height 48px
        position relative
        border-1px(rgba(7,17,27,.1))
        .name
          font-size 14px
        .right
          position: absolute
          right 0
          top 0
          .price
            font-size 10px
            font-weight 700
            color rgb(240,20,20)
          .btn-wrap
            display inline-block
</style>
